<template>
  <div id="app">
    <div class="main-container">
      <div class="main-content">
        <div class="row">
          <div class="col-sm-10 col-sm-offset-1">
            <div class="login-container">
              <div class="center">
                <h1>
                  <i class="ace-icon fa fa-leaf green"></i>
                  <span id="login-font">控台登录</span>
                </h1>
                <!--                <h4 class="blue" id="id-company-text">&copy; Company Name</h4>-->
              </div>

              <div class="space-6"></div>

              <div class="position-relative">
                <div id="login-box" class="login-box visible widget-box no-border">
                  <div class="widget-body">
                    <div class="widget-main">
                      <h4 class="header blue lighter bigger">
                        <i class="ace-icon fa fa-coffee green"></i>
                        请输入用户名密码
                      </h4>

                      <div class="space-6"></div>

                      <form>
                        <fieldset>
                          <label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="text" class="form-control" placeholder="用户名"/>
															<i class="ace-icon fa fa-user"></i>
														</span>
                          </label>

                          <label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="password" class="form-control" placeholder="密码"/>
															<i class="ace-icon fa fa-lock"></i>
														</span>
                          </label>

                          <div class="space"></div>

                          <div class="clearfix">
                            <label class="inline">
                              <input type="checkbox" class="ace"/>
                              <span class="lbl"> 记住我</span>
                            </label>

                            <button type="button" @click="login()"
                                    class="width-35 pull-right btn btn-sm btn-primary">
                              <i class="ace-icon fa fa-key"></i>
                              <span class="bigger-110">登录</span>
                            </button>
                          </div>

                          <div class="space-4"></div>
                        </fieldset>
                      </form>

                      <div class="social-or-login center">
                        <span class="bigger-110">或者登录使用</span>
                      </div>

                      <div class="space-6"></div>

                      <div class="social-login center">
                        <a class="btn btn-primary">
                          <i class="ace-icon fa fa-facebook"></i>
                        </a>

                        <a class="btn btn-info">
                          <i class="ace-icon fa fa-twitter"></i>
                        </a>

                        <a class="btn btn-danger">
                          <i class="ace-icon fa fa-google-plus"></i>
                        </a>
                      </div>
                    </div><!-- /.widget-main -->

                    <div class="toolbar clearfix">
                      <div>
                        <a href="#" data-target="#forgot-box" class="forgot-password-link">
                          <i class="ace-icon fa fa-arrow-left"></i>
                          我忘记我的密码
                        </a>
                      </div>

                      <div>
                        <a href="#" data-target="#signup-box" class="user-signup-link">
                          我想注册
                          <i class="ace-icon fa fa-arrow-right"></i>
                        </a>
                      </div>
                    </div>
                  </div><!-- /.widget-body -->
                </div><!-- /.login-box -->

<!--                <div id="forgot-box" class="forgot-box widget-box no-border">-->
<!--                  <div class="widget-body">-->
<!--                    <div class="widget-main">-->
<!--                      <h4 class="header red lighter bigger">-->
<!--                        <i class="ace-icon fa fa-key"></i>-->
<!--                        找回密码-->
<!--                      </h4>-->

<!--                      <div class="space-6"></div>-->
<!--                      <p>-->
<!--                        输入您的电子邮件并接收说明-->
<!--                      </p>-->

<!--                      <form>-->
<!--                        <fieldset>-->
<!--                          <label class="block clearfix">-->
<!--														<span class="block input-icon input-icon-right">-->
<!--															<input type="email" class="form-control" placeholder="邮箱"/>-->
<!--															<i class="ace-icon fa fa-envelope"></i>-->
<!--														</span>-->
<!--                          </label>-->

<!--                          <div class="clearfix">-->
<!--                            <button type="button" class="width-35 pull-right btn btn-sm btn-danger">-->
<!--                              <i class="ace-icon fa fa-lightbulb-o"></i>-->
<!--                              <span class="bigger-110">发送！</span>-->
<!--                            </button>-->
<!--                          </div>-->
<!--                        </fieldset>-->
<!--                      </form>-->
<!--                    </div>&lt;!&ndash; /.widget-main &ndash;&gt;-->

<!--                    <div class="toolbar center">-->
<!--                      <a href="#" data-target="#login-box" class="back-to-login-link">-->
<!--                        返回登录-->
<!--                        <i class="ace-icon fa fa-arrow-right"></i>-->
<!--                      </a>-->
<!--                    </div>-->
<!--                  </div>&lt;!&ndash; /.widget-body &ndash;&gt;-->
<!--                </div>&lt;!&ndash; /.forgot-box &ndash;&gt;-->

<!--                <div id="signup-box" class="signup-box widget-box no-border">-->
<!--                  <div class="widget-body">-->
<!--                    <div class="widget-main">-->
<!--                      <h4 class="header green lighter bigger">-->
<!--                        <i class="ace-icon fa fa-users blue"></i>-->
<!--                        注册新用户-->
<!--                      </h4>-->

<!--                      <div class="space-6"></div>-->
<!--                      <p> 输入您的详细信息： </p>-->

<!--                      <form>-->
<!--                        <fieldset>-->
<!--                          <label class="block clearfix">-->
<!--														<span class="block input-icon input-icon-right">-->
<!--															<input type="email" class="form-control" placeholder="邮箱"/>-->
<!--															<i class="ace-icon fa fa-envelope"></i>-->
<!--														</span>-->
<!--                          </label>-->

<!--                          <label class="block clearfix">-->
<!--														<span class="block input-icon input-icon-right">-->
<!--															<input type="text" class="form-control" placeholder="用户名"/>-->
<!--															<i class="ace-icon fa fa-user"></i>-->
<!--														</span>-->
<!--                          </label>-->

<!--                          <label class="block clearfix">-->
<!--														<span class="block input-icon input-icon-right">-->
<!--															<input type="password" class="form-control" placeholder="密码"/>-->
<!--															<i class="ace-icon fa fa-lock"></i>-->
<!--														</span>-->
<!--                          </label>-->

<!--                          <label class="block clearfix">-->
<!--														<span class="block input-icon input-icon-right">-->
<!--															<input type="password" class="form-control" placeholder="重复密码"/>-->
<!--															<i class="ace-icon fa fa-retweet"></i>-->
<!--														</span>-->
<!--                          </label>-->

<!--                          <label class="block">-->
<!--                            <input type="checkbox" class="ace"/>-->
<!--                            <span class="lbl">-->
<!--															我接受-->
<!--															<a href="#">用户协议</a>-->
<!--														</span>-->
<!--                          </label>-->

<!--                          <div class="space-24"></div>-->

<!--                          <div class="clearfix">-->
<!--                            <button type="reset" class="width-30 pull-left btn btn-sm">-->
<!--                              <i class="ace-icon fa fa-refresh"></i>-->
<!--                              <span class="bigger-110">重置</span>-->
<!--                            </button>-->

<!--                            <button type="button" class="width-65 pull-right btn btn-sm btn-success">-->
<!--                              <span class="bigger-110">注册</span>-->

<!--                              <i class="ace-icon fa fa-arrow-right icon-on-right"></i>-->
<!--                            </button>-->
<!--                          </div>-->
<!--                        </fieldset>-->
<!--                      </form>-->
<!--                    </div>-->

<!--                    <div class="toolbar center">-->
<!--                      <a href="#" data-target="#login-box" class="back-to-login-link">-->
<!--                        <i class="ace-icon fa fa-arrow-left"></i>-->
<!--                        返回登录-->
<!--                      </a>-->
<!--                    </div>-->
<!--                  </div>&lt;!&ndash; /.widget-body &ndash;&gt;-->
<!--                </div>&lt;!&ndash; /.signup-box &ndash;&gt;-->
              </div><!-- /.position-relative -->

<!--              <div class="navbar-fixed-top align-right">-->
<!--                <br/>-->
<!--                &nbsp;-->
<!--                <a id="btn-login-dark" href="#">Dark</a>-->
<!--                &nbsp;-->
<!--                <span class="blue">/</span>-->
<!--                &nbsp;-->
<!--                <a id="btn-login-blur" href="#">Blur</a>-->
<!--                &nbsp;-->
<!--                <span class="blue">/</span>-->
<!--                &nbsp;-->
<!--                <a id="btn-login-light" href="#">Light</a>-->
<!--                &nbsp; &nbsp; &nbsp;-->
<!--              </div>-->
            </div>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.main-content -->
    </div><!-- /.main-container -->
  </div>
</template>

<script>
export default {
  name: 'login',
  mounted() {
    console.log("login")
    $('body').removeClass('no-skin');
    $('body').attr('class', 'login-layout light-login');
  },
  methods:{
    login(){
      this.$router.push("/welcome")
    }
  }
}
</script>
